<template>
    <div class="header">
      <div class="collapse-btn">
        <i class="el-icon-menu" @click="collapseChange"></i>
      </div>
      <div class="logo">后台管理</div>
      <div class="header-right">
        <el-tooltip
          :content="fullscreen ? '取消全屏' : '全屏'"
          placement="bottom"
        >
          <div class="btn-fullscreen" @click="handleFullScreen">
            <i class="el-icon-rank"></i>
          </div>
        </el-tooltip>
        <!-- 头像 -->
        <div class="headPortrait">
          <img :src="user.headSculpture" />
        </div>
        <!-- 下拉 -->
        <el-dropdown
          class="userName"
          trigger="click"
          @command="handleCommand"
          size="small"
        >
          <span class="el-dropdown-link">
            {{ user.username }}
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </template>
  
  <script>
  import bus from "../utils/bus";
  export default {
    data() {
      return {
        collapse: false,
        fullscreen: false,
        user:{}
      };
    },
    methods: {
      getUserInfo() {
        this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
      },
      test() {
        console.log("测试方法运行中");
      },
      checkFull() {
        console.log("监听方法运行");
        //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
        //火狐浏览器
        var isFull =
          document.mozFullScreen ||
          document.fullScreen ||
          //谷歌浏览器及Webkit内核浏览器
          document.webkitIsFullScreen ||
          document.webkitRequestFullScreen ||
          document.mozRequestFullScreen ||
          document.msFullscreenEnabled;
        console.log("****************");
        console.log(isFull);
        if (isFull === undefined) {
          isFull = false;
        }
        return isFull;
      },
      //折叠栏
      collapseChange() {
        this.collapse = !this.collapse;
        bus.$emit("collapseChange", this.collapse);
      },
      //全屏
      handleFullScreen() {
        //如果是全屏则退出
        if (this.fullscreen) {
          //判断各种浏览器
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            //safari chrome
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            //firefox
            document.mozCancelFullScreen();
          } else if (document.msExitFullScreen)
            //ie
            document.msExitFullScreen();
        } else {
          //页面元素
          let element = document.documentElement;
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (webkitRequestFullScreen) {
            //safari Chrome
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            //firefox
            element.mozRequestFullScreen();
          } else if (element.msRequestFullScreen) {
            //ie
            element.msRequestFullScreen;
          }
        }
        this.fullscreen = !this.fullscreen;
        console.log("全屏状态改变");
      },
      //菜单点击事件
      handleCommand(command) {
        console.log(command);
        if (command == "loginout") {
          this.$confirm("是否退出登录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "退出成功!",
              });
              //返回登录页
              this.$router.replace('/login');
              //清除信息
              sessionStorage.setItem('user', null);

            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        }
      },
    },
    computed: {
      //获取用户信息
      getUserInfo() {
        this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
      },
    },
  
    created() {
      this.getUserInfo();
      window.onresize = function () {
        console.log("全屏了");
        if (!this.checkFull()) {
          // 退出全屏后要执行的动作
          console.log("退出全屏");
          this.fullscreen = false;
        }
  
      };
    },
  };
  </script>
  
  <style scoped>
  .header {
    position: relative;
    background-color: #253041;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #ffffff;
  }
  
  .header > .collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
  }
  
  .header > .logo {
    float: left;
    line-height: 70px;
  }
  
  .header > .header-right {
    float: right;
    padding-right: 50px;
    display: flex;
    height: 70px;
    align-items: center;
  }
  .header-right > .btn-fullscreen {
    margin-left: 5px;
    transform: rotate(45deg);
    font-size: 24px;
  }
  .header-right > .headPortrait {
    margin-left: 20px;
  }
  .header-right > .headPortrait > img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .header-right > .userName {
    margin-left: 15px;
    cursor: pointer;
  }
  .header-right > .userName > .el-dropdown-link {
    color: #ffffff;
  }
  </style>
  